import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import * as $ from 'jquery';
import { HttpClient } from "@angular/common/http";//服务
import { Storage } from '@ionic/storage';//数据存储
import { AlertController } from 'ionic-angular';
import { ToastController } from 'ionic-angular';//提示框
import { HomePage } from '../home/home';
@IonicPage()
@Component({
  selector: 'page-setting',
  templateUrl: 'setting.html',
})
export class SettingPage {
  searchCity: any;
  historyArray: any;
  theme: string;
  collectionArray: any;
  flag: boolean;
  cityArray: any;
  constructor(public navCtrl: NavController, public navParams: NavParams, public http: HttpClient, private storage: Storage, public alertCtrl: AlertController, private toastCtrl: ToastController) {
    this.flag = true;
    this.cityArray = ['北京', '上海', '天津', '重庆', '石家庄', '唐山', '秦皇岛', '邯郸', '邢台', '保定', '张家口', '承德', '沧州', '廊坊', '衡水', '太原', '大同', '阳泉', '长治', '晋城', '朔州', '晋中', '运城', '忻州', '临汾', '吕梁',
      '呼和浩特', '包头', '乌海', '赤峰', '通辽', '鄂尔多斯', '呼伦贝尔', '巴彦淖尔', '乌兰察布', '兴安', '锡林郭勒', '阿拉善', '沈阳', '大连', '鞍山', '抚顺', '本溪', '丹东', '锦州', '营口', '阜新', '辽阳', '盘锦', '铁岭', '朝阳', '葫芦岛',
      '长春', '吉林', '四平', '辽源', '通化', '白山', '松原', '白城', '延边', '哈尔滨', '齐齐哈尔', '鸡西', '鹤岗', '双鸭山', '大庆', '伊春', '佳木斯', '七台河', '牡丹江', '黑河', '绥化', '大兴安岭', '南京', '无锡', '徐州', '常州', '苏州', '南通', '连云港', '淮安', '盐城', '扬州', '镇江', '泰州', '宿迁',
      '杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水', '合肥', '芜湖', '蚌埠', '淮南', '马鞍山', '福州', '厦门', '莆田', '南昌', '景德镇', '萍乡', '九江', '济南', '青岛', '淄博', '枣庄', '东营', '烟台',
      '郑州', '开封', '洛阳', '平顶山', '焦作', '鹤壁', '新乡', '安阳', '濮阳', '许昌', '漯河', '三门峡', '南阳', '商丘', '信阳', '周口', '驻马店', '武汉', '黄石', '襄樊', '十堰', '荆州', '长沙', '株洲', '湘潭', '广州', '深圳', '珠海', '汕头', '南宁', '柳州', '桂林', '梧州', '北海',
      '海口', '三亚', '成都', '自贡', '攀枝花', '贵阳', '六盘水', '遵义', '昆明', '曲靖', '玉溪', '保山', '拉萨', '昌都', '山南', '西安', '铜川', '宝鸡', '兰州', '嘉峪关', '金昌', '白银', '西宁', '海东', '海北', '银川', '石嘴山', '吴忠', '乌鲁木齐', '克拉玛依', '吐鲁番', '香港', '澳门']
  }
  ionViewWillEnter() {
    this.storage.get('history').then((val) => {
      this.historyArray = val;
    });
    this.storage.get('theme').then((val) => {
      if (val) {
        this.theme = val.th ? val.th : 'background_two';
        var index = val.in ? val.in : 0;
        $('#setul li').eq(index).addClass('trs')
      } else {
        this.theme = 'background_two';
        $('#setul li').eq(1).addClass('trs')
      }
    });
    this.storage.get('collection').then((val) => {
      if (val) {
        this.collectionArray = val;
      } else {
        this.collectionArray = null;
      }

    })
  }
  goBack() {
    this.navCtrl.pop()
  }
  onInput(ev: any) {
    const val = ev.target.value;
    if (val) {
      $('.tips').show();
      $('.serachList_div').hide();
      var data=[];
      for (var i = 0; i < this.cityArray.length; i++) {
        if (this.cityArray[i].indexOf(val) != -1) {
          data.push(this.cityArray[i]);
        }
      }
      this.searchCity=data;
      if (this.searchCity.length == 0) {
        this.searchCity = ['没有获取到相关地址信息'];
      }
      $('.tips').hide();
    } else {
      this.searchCity = ['没有获取到相关地址信息'];
      $('.tips').hide();
    }
  }
  onClear(e: any) {
    $('input').blur()
  }
  onFocus(e: any) {
    $('.collection').fadeOut()
    $('.serachList,.cacle_div').fadeIn()
  }

  calceSearch() {
    $('.serachList,.cacle_div').fadeOut()
    $('.collection').fadeIn()
  }
  serachs(str: string) {
    if (str && str != '没有获取到相关地址信息') {
      var array = [str]
      this.storage.get('history').then((val) => {
        if (val) {
          this.storage.set('history', array.concat(val)).then(() => {
            this.historyArray = array.concat(val);
            this.navCtrl.push(HomePage, { city: str });
          })
        } else {
          this.storage.set('history', array).then(() => {
            this.historyArray = array;
            this.navCtrl.push(HomePage, { city: str });
          })
        }
      })
    }

  }
  cleanHistory() {
    var confirm = this.alertCtrl.create({
      title: '晴时',
      message: '确定要清空历史记录吗？',
      buttons: [
        {
          text: '取消'
        },
        {
          text: '确定',
          handler: () => {
            this.storage.remove('history');
            this.historyArray = null;
          }
        }
      ]
    });
    confirm.present();
  }
  cleanCollection() {
    var confirm = this.alertCtrl.create({
      title: '晴时',
      message: '确定要清空收藏的城市吗？',
      buttons: [
        {
          text: '取消'
        },
        {
          text: '确定',
          handler: () => {
            this.storage.remove('collection');
            this.collectionArray = null;
          }
        }
      ]
    });
    confirm.present();
  }
  pressEvent() {
    this.flag = false;
    $('.ul_list li').addClass('shaky');
  }
  deleteHistroy(id: number, e: any) {
    e.stopPropagation()
    this.storage.get('history').then((val) => {
      var part1 = val.slice(0, id + 1);
      var part2 = val.slice(id + 1);
      part1.pop();
      this.storage.set('history', part1.concat(part2)).then(() => {
        this.historyArray = part1.concat(part2).length > 0 ? part1.concat(part2) : null;
      });
    })
  }
  deleteCollection(id: number, e: any) {
    e.stopPropagation()
    this.storage.get('collection').then((val) => {
      var part1 = val.slice(0, id + 1);
      var part2 = val.slice(id + 1);
      part1.pop();
      this.storage.set('collection', part1.concat(part2)).then(() => {
        this.collectionArray = part1.concat(part2).length > 0 ? part1.concat(part2) : null;
      });
    })
  }
  removeShake() {
    this.flag = true;
    $('.ul_list li').removeClass('shaky')
  }
  historyCity(e: any, item) {
    if (this.flag == true) {
      this.navCtrl.push(HomePage, { city: item });
    }
    e.stopPropagation()
  }

  setToggle() {
    $('.set_color').toggleClass('set_color_width');
  }
  setTheme(theme: string, index: number) {
    if (this.theme != theme) {
      this.storage.set('theme', { 'th': theme, 'in': index }).then(() => {
        this.theme = theme;
        $('#setul li').removeClass('trs')
        $('#setul li').eq(index).addClass('trs')
      })
    } else {
      return
    }
  }
  HotCitys(city) {
    this.navCtrl.push(HomePage, { city: city });
  }
  tishikuang(str) {//提示框
    let toast = this.toastCtrl.create({
      message: str,
      duration: 2000,
      position: 'top'
    });
    toast.present();
  }
}
